<clr-modal [(clrModalOpen)]="cronModal" [clrModalClosable]="false" [clrModalSize]="'lg'">
    <h3 class="modal-title">Compose Cron</h3>
    <div class="modal-body">
        <clr-tabs>
            <clr-tab>
                <button (click)="cronType='Minutes';" clrTabLink>Minutes</button>
                <clr-tab-content *clrIfActive>
                    <form #minutesForm="ngForm" (ngSubmit)="composeCron(minutesForm.value);cronModal=false;minutesForm.reset();" ngNativeValidate>
                        <section class="form-block">Start at&nbsp;
                            <select name="startat" ngModel required>
                                <option *ngFor="let clockRange of clockRanges">{{clockRange}}</option>
                                <option>59</option>
                            </select>&nbsp;minute(s). On every&nbsp;
                            <select name="minute" ngModel required>
                                <option *ngFor="let clockRange of clockRanges">{{clockRange+1}}</option>
                            </select>&nbsp;minute(s) at&nbsp;
                            <select name="second" ngModel required>
                                <option *ngFor="let clockRange of clockRanges">{{clockRange}}</option>
                                <option>59</option>
                            </select>&nbsp;second(s)
                        </section>
                        <button type="button" class="btn btn-outline" (click)="cancelCronModal();cronModal=false;minutesForm.reset();">CANCEL</button>
                        <button type="submit" class="btn btn-primary">ADD</button>
                    </form>
                </clr-tab-content>
            </clr-tab>
            <clr-tab>
                <button (click)="cronType='Hourly';" clrTabLink>Hourly</button>
                <clr-tab-content *clrIfActive>
                    <form #hourlyForm="ngForm" (ngSubmit)="composeCron(hourlyForm.value);cronModal=false;hourlyForm.reset();" ngNativeValidate>
                        <section class="form-block">Start at&nbsp;
                            <select name="startat" ngModel required>
                                <option *ngFor="let hourRange of hourRanges">{{hourRange}}</option>
                                <option>23</option>
                            </select>&nbsp;hour(s). On every&nbsp;
                            <select name="hour" ngModel required>
                                <option *ngFor="let hourRange of hourRanges">{{hourRange+1}}</option>
                            </select>&nbsp;hour(s) at&nbsp;
                             <select name="minute" ngModel required>
                                <option *ngFor="let clockRange of clockRanges">{{clockRange}}</option>
                                <option>59</option>
                            </select>&nbsp;minute(s)
                        </section>
                        <button type="button" class="btn btn-outline" (click)="cancelCronModal();cronModal=false;hourlyForm.reset();">CANCEL</button>
                        <button type="submit" class="btn btn-primary">ADD</button>
                    </form>
                </clr-tab-content>
            </clr-tab>
            <clr-tab>
                <button (click)="cronType='Daily';" clrTabLink>Daily</button>
                <clr-tab-content *clrIfActive>
                    <form #dailyForm="ngForm" (ngSubmit)="composeCron(dailyForm.value);cronModal=false;dailyForm.reset();" ngNativeValidate>
                        <section class="form-block">Daily at&nbsp;
                            <select name="hour" ngModel required>
                                <option *ngFor="let hourRange of hourRanges">{{hourRange}}</option>
                                <option>23</option>
                            </select>&nbsp;hour(s)&nbsp;
                             <select name="minute" ngModel required>
                                <option *ngFor="let clockRange of clockRanges">{{clockRange}}</option>
                                <option>59</option>
                            </select>&nbsp;minute(s)
                        </section>
                        <button type="button" class="btn btn-outline" (click)="cancelCronModal();cronModal=false;dailyForm.reset();">CANCEL</button>
                        <button type="submit" class="btn btn-primary">ADD</button>
                    </form>
                </clr-tab-content>
            </clr-tab>
            <clr-tab>
                <button (click)="cronType='Weekly';" clrTabLink>Weekly</button>
                <clr-tab-content *clrIfActive>
                    <form #weeklyForm="ngForm" (ngSubmit)="composeCron(weeklyForm.value);cronModal=false;weeklyForm.reset();" ngNativeValidate>
                        <section class="form-block">Weekly on day&nbsp;
                            <select name="day" ngModel required>
                                <option *ngFor="let dayRange of dayRanges">{{dayRange}}</option>
                            </select>&nbsp;at&nbsp;
                             <select name="hour" ngModel required>
                                <option *ngFor="let hourRange of hourRanges">{{hourRange}}</option>
                                <option>23</option>
                            </select>&nbsp;hour(s)
                        </section>
                        <button type="button" class="btn btn-outline" (click)="cancelCronModal();cronModal=false;weeklyForm.reset();">CANCEL</button>
                        <button type="submit" class="btn btn-primary">ADD</button>
                    </form>
                </clr-tab-content>
            </clr-tab>
            <clr-tab>
                <button (click)="cronType='Monthly';" clrTabLink>Monthly</button>
                <clr-tab-content *clrIfActive>
                    <form #monthlyForm="ngForm" (ngSubmit)="composeCron(monthlyForm.value);cronModal=false;monthlyForm.reset();" ngNativeValidate>
                        <section class="form-block">Monthly on date&nbsp;
                            <select name="date" ngModel required>
                                <option *ngFor="let dateRage of dateRages">{{dateRage}}</option>
                            </select>&nbsp;at&nbsp;
                              <select name="hour" ngModel required>
                                <option *ngFor="let hourRange of hourRanges">{{hourRange}}</option>
                                <option>23</option>
                            </select>&nbsp;hour(s)
                        </section>
                        <button type="button" class="btn btn-outline" (click)="cancelCronModal();cronModal=false;monthlyForm.reset();">CANCEL</button>
                        <button type="submit" class="btn btn-primary">ADD</button>
                    </form>
                </clr-tab-content>
            </clr-tab>
        </clr-tabs>
    </div>
</clr-modal>